<template>
  <div class="app-container">
    <el-col>
        <el-form :inline="true" size="small">
          <el-form-item>
            <el-button type="success" @click="addIndexImg" >添加</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    <el-table
      :data="indexImgs"
      border
      style="width: 100%">
    <el-table-column
      align = "center"
      prop="id"
      label="轮播图Id"
      width="80">
    </el-table-column>
    <el-table-column
      align = "center"
      prop="categories.name"
      label="名称"
      width="160">
    </el-table-column>
    <el-table-column
      align = "center"
      label="商品图片"
      width="200">
      <template slot-scope="scope">
        <el-image 
          style="width: 100px; height: 100px"
          :src='scope.row.url'>
        </el-image>
      </template>
    </el-table-column>
    <el-table-column
      align = "center"
      prop="indexType"
      label="类别"
      width="160">
    </el-table-column>
    <el-table-column
      align = "center"
      prop="status"
      label="商品状态"
      width="80">
       <template slot-scope="scope">
              <el-switch
                @change="changeStatus(scope.row.id, scope.row.status, scope.row.categories.name)"
                :value="scope.row.status"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </template>
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        sortable>
    </el-table-column>
    <el-table-column
        prop="updateTime"
        label="更新时间"
        align="center"
        sortable>
    </el-table-column>

    <el-table-column
        align = "center"
        width="225"
        label="操作">
      <template slot-scope="scope">
          <el-button type="info" size="mini" @click.prevent="updateProd(scope.row.id)">编辑</el-button>
          <el-button size="mini" @click="delProd(scope.row.id)" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <add-indexImg-dialog ref="addDialog" @refresh="goto" :categories="categories"></add-indexImg-dialog>
  </div>
</template>
<script>

import http from '@/utils/request'
import AddIndexImgDialog from '@/components/indexImg/AddIndexImgDialog.vue'

export default {
  components: { AddIndexImgDialog },
    data() {
      return {
        indexImgs: [],
        categories:[]
      }
    },
    mounted(){
      this.goto();
      http.get("/category/backend").then(res =>{
        this.categories = res.data.data.data
      })
    },
    methods:{
      goto() {
      http.get('/index-img/backend').then(res => {
         this.indexImgs = res.data.data.data
        //  window.console.log("----------------------------");
        //  window.console.log(this.indexImgs);
      })
    },
    //编辑
    updateProd(pId){
        console.log(pId);
    },
    // 添加
    addIndexImg() {
      this.$refs.addDialog.$data.showAddIndexImgtDialog = true;
      // console.log(this.$refs.addIndexImg);
    },
    delProd(indexId){
       this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {  // 表示用户点击了确认按钮
           http.delete(`/index-img/${indexId}`)
            .then(() => {
              this.$message({
                type:"success",
                message:"删除成功！",
                duration:2000,
              })
              this.goto()
            })
        }).catch(() => {

         }); // 用户点击了取消按钮
    },
    // 改变对应的用户状态
    changeStatus(id, status, name) {
      // window.console.log(id);
       this.$confirm(`你是否要${status == 1 ? '禁用' : '启用'} ${name}`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {  // 用户点击确认
           http.put(`/index-img/backend/${id}`, {
             status: status
           }).then(() => {
              http.get(`/index-img/backend/${id}`)
                .then(res => {
                  //为了避免前端整个表格全部重新渲染，我们只需要改变被改变的数据即可
                  let su = res.data.data
                  // 获取到数据对应的索引
                  let idx = this.indexImgs.findIndex(u => u.id == su.id)
                  // 将对应的数据替换掉，那么这个dom只会重新渲染当前行
                  this.indexImgs.splice(idx, 1, su)
                })
           })
        }).catch()  // 用户点击取消
    }
  }
}
</script>

<style>

</style>


